* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.canbox {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.canbox .header {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    background: linear-gradient(to right, #03c0ce, #7830e6);
    /* background-color: aqua; */
    line-height: 50px;
    color: white;

}

.headerri {
    float: right;
    display: flex;
    height: 50px;
    align-items: center;
}

.sycm {
    width: 100%;
    height: 50px;
    line-height: 50px;
    /* background-color: aqua; */
    margin-top: 20px;
}

.canbox main {
    flex: 1;
    overflow: scroll;
}

.canbox main .left {
    width: 30%;
    height: 100%;
    background-color: rgb(37, 38, 39);
    float: left;
}

main .left .lefttype {
    width: 70px;
    height: 100%;
    float: left;
    border: 1px solid #fff;
}

main .left .righttype {
    float: left;
    width: 84.6%;
    height: 100%;
    /* background-color: #7830e6; */
}

main .left .lefttype .tablt {
    width: 100%;
    height: 69px;
    color: #ccc;
    line-height: 30px;
    text-align: center;
}

main .left .righttype .yhjk {
    width: 100%;
    height: 40px;
    background-color: blue;
}

main .left .righttype .square {
    width: 80px;
    /* 你可以根据需要调整这个值 */
    height: 80px;
    /* 保持与宽度相同 */
    background-color: #E5E5E5;
    /* 设定背景颜色，可根据需要修改 */
    display: flex;
    /* 使用Flexbox使内容居中（如果需要） */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    color: white;
    /* 文字颜色 */
    border-radius: 15px;
    margin: 20px 5px 20px 5px;
    float: left;
    /* position: relative; */
}

main .left .righttype .circle {
    width: 80px;
    /* 你可以根据需要调整这个值 */
    height: 80px;
    /* 保持与宽度相同，但在这个情况下，border-radius会覆盖这个形状 */
    border-radius: 50%;
    /* 将此元素变为圆形 */
    background-color: #E5E5E5;
    /* 设定背景颜色 */
    display: flex;
    /* 使用Flexbox使内容居中（如果需要） */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    color: white;
    /* 文本颜色 */
    text-overflow: ellipsis;
    /* 文本溢出时显示省略号 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    white-space: nowrap;
    /* 防止文本换行 */
    margin: 20px 5px 20px 5px;
    float: left;
}

main .left .righttype .custom-divider {
    width: 50px;
    height: 2px;
    /* 横线的高度 */
    background-color: #ccc;
    /* 横线的颜色 */
    border: none;
    /* 移除默认的边框样式（如果有的话） */
    margin: 65px 5px 20px 5px;
    float: left;
}

main .left .righttype .right-arrow {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    /* 透明边框，上边框 */
    border-bottom: 50px solid transparent;
    /* 透明边框，下边框 */
    border-left: 50px solid #E5E5E5;
    /* 左边框，颜色可以根据需要更改 */
    transform: rotate(-90deg);
    float: left;
    margin: 20px;
}

main .left .righttype .tpspyp {
    width: 33%;
    color: white;
    text-align: center;
}

main .left .righttype .fxndyy {
    width: 50%;
    color: white;
    text-align: center;
}

.mbystype {
    width: 50%;
    text-align: center;
    color: #fff;
}

main .right {
    width: 70%;
    height: 100%;
    float: left;
    background-color: #EBECF0;
    display: flex;
    flex-direction: column;
}

main .right .nbheader {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ccc;
    background-color: white;
    line-height: 40px;
}

.right main {
    flex: 1;
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
    /* position: relative; */
}


.right footer {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ccc;
    background-color: white;
    line-height: 40px;
}

.divmian {
    display: flex;
    align-items: center;
    justify-content: center;
}

.right main .buttontjym {
    /* position: absolute; */
    text-align: center;
    margin-left: 36%;
    width: 29%;
    color: #000;
    height: 40px;
    border: 1px solid #ccc;
    /* left: 50%;
   bottom: 5%; */
}